<!DOCTYPE html>
<html lang="ru">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nti TestTask</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
    <link rel="stylesheet" href="css/style.css">

    <script src="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.js"></script>
</head>

<body>
    <header class="header full">
        <nav class="header_bck">
            <div class="navigation center">
                <ul class="header_address">
                    <li><a class="map_address" href="">Магазины</a></li>
                    <li class="header_address_mail"><a class="mail_address"
                            href="mailto:info@kraskizdes.ru">info@kraskizdes.ru</a></li>
                    <li><a href="#" class="header_logo_hidden"><img src="img/main_logo.png" alt="main_logo"></a></li>
                    <li><a href="#" class="header_tel_hidden">nomber</a></li>
                </ul>
                <ul class="header_links">
                    <li class="header_links_name"><a href="#">Доставка</a></li>
                    <li class="header_links_name"><a href="#">Оплата</a></li>
                    <li class="header_links_name"><a href="#">Возврат</a></li>
                    <li class="header_links_name"><a href="#">Помощь</a></li>
                    <li class="header_links_name"><a href="#">О нас</a></li>
                    <li class="header_links_name"><a href="#">Для бизнеса</a></li>
                </ul>
            </div>
        </nav>
        <section class="header_menu center">
            <button class="menu_burger_hidden" onclick="toggleMenu()">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" viewBox="0 0 20 16" fill="none">
                    <path
                        d="M1.5 3.5L18.5 3.5C18.8978 3.5 19.2794 3.34197 19.5607 3.06066C19.842 2.77936 20 2.39783 20 2C20 1.60218 19.842 1.22065 19.5607 0.939343C19.2794 0.658038 18.8978 0.500003 18.5 0.500003L1.5 0.5C1.10218 0.5 0.720644 0.658035 0.43934 0.93934C0.158035 1.22064 -1.9271e-07 1.60218 -2.62268e-07 2C-3.31826e-07 2.39782 0.158035 2.77936 0.439339 3.06066C0.720644 3.34197 1.10217 3.5 1.5 3.5ZM18.5 6.5L1.5 6.5C1.10217 6.5 0.720643 6.65804 0.439339 6.93934C0.158034 7.22064 -1.24178e-06 7.60218 -1.31134e-06 8C-1.3809e-06 8.39782 0.158034 8.77936 0.439338 9.06066C0.720643 9.34196 1.10217 9.5 1.5 9.5L18.5 9.5C18.8978 9.5 19.2794 9.34197 19.5607 9.06066C19.842 8.77936 20 8.39783 20 8C20 7.60218 19.842 7.22065 19.5607 6.93934C19.2794 6.65804 18.8978 6.5 18.5 6.5ZM18.5 12.5L1.5 12.5C1.10217 12.5 0.720642 12.658 0.439338 12.9393C0.158033 13.2206 -2.29086e-06 13.6022 -2.36041e-06 14C-2.42997e-06 14.3978 0.158033 14.7794 0.439337 15.0607C0.720642 15.342 1.10217 15.5 1.5 15.5L18.5 15.5C18.8978 15.5 19.2794 15.342 19.5607 15.0607C19.842 14.7794 20 14.3978 20 14C20 13.6022 19.842 13.2206 19.5607 12.9393C19.2794 12.658 18.8978 12.5 18.5 12.5Z"
                        fill="white" />
                </svg>
            </button>

            <div class="overlay" onclick="closeMenu()"></div>

            <div class="menu">
                <button class="close-btn" onclick="closeMenu()">×</button>
                <ul class="menu_account_link">
                    <li><a href="#"><img src="img/catalog_link_icon.svg" alt=""> Каталог</a></li>
                    <li><a href="#"><img src="img/cart_icon_mini_pink.svg" alt=""> Корзина</a></li>
                    <li><a href="#"><img src="img/heart_icon_mini.svg" alt=""> Избранное</a></li>
                    <li><a href="#"><img src="img/man_icon.svg" alt=""> Профиль</a></li>
                </ul>
                <div class="divider"></div>
                <ul class="menu_btn_list">
                    <li><button class="contact-btn" ><img src="img/mail_icon_mini.svg" alt="">  info@kraskizdes.ru</button></li>
                    <li><button class="contact-btn"><img src="img/tel_icon_mini.svg" alt=""> 8 (495) 120-81-55</button></li>
                    
                </ul>

                <div class="divider"></div>
                <ul class="menu_nav">
                    <li><a href="#">Доставка</a></li>
                    <li><a href="#">Оплата</a></li>
                    <li><a href="#">Возврат</a></li>
                    <li><a href="#">Помощь</a></li>
                    <li><a href="#">О нас</a></li>
                    <li><a href="#">Для бизнеса</a></li>
                </ul>
            </div>
            <div class="main_logo_wrp">
                <a href="#" class="main_logo">
                    <img src="img/main_logo.png" alt="main_logo">
                </a>
            </div>
            <div class="header_catalog_btn">
                <a href="#" class="catalog_link">
                    <div class="catalog_link_icon_wrp">
                        <svg class="catalog_link_icon" xmlns="http://www.w3.org/2000/svg" width="20" height="18"
                            viewBox="0 0 20 18" fill="none">
                            <path
                                d="M1.42871 1.74603C1.42871 0.781725 2.21044 0 3.17474 0H16.8255C17.7898 0 18.5716 0.781725 18.5716 1.74603H1.42871Z"
                                fill="#E50E78" />
                            <path
                                d="M0.476562 4.44525C0.476562 3.48094 1.25829 2.69922 2.22259 2.69922H17.7781C18.7425 2.69922 19.5242 3.48094 19.5242 4.44525H0.476562Z"
                                fill="#E50E78" />
                            <path
                                d="M1 7.39746C1 6.84518 1.44771 6.39746 2 6.39746H18C18.5523 6.39746 19 6.84518 19 7.39746V15.6197C19 16.172 18.5523 16.6197 18 16.6197H2C1.44772 16.6197 1 16.172 1 15.6197V7.39746Z"
                                stroke="#E50E78" stroke-width="2" />
                        </svg>
                    </div>
                </a>
            </div>
            <div class="header_search_wrp">
                <input class="header_search" id="search-btn" type="search" placeholder="Искать товары">
                <button class="search_icon">
                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="21" viewBox="0 0 22 21" fill="none">
                        <path
                            d="M6.39423 4.89554C6.09755 4.59862 5.6162 4.59862 5.31952 4.89554C4.21797 5.99709 3.67656 7.53161 3.8339 9.10591C3.87316 9.49809 4.20355 9.79044 4.58939 9.79044C4.61474 9.79044 4.6403 9.78915 4.66565 9.78662C5.08343 9.74483 5.38819 9.37213 5.3464 8.95463C5.23442 7.83585 5.61648 6.748 6.39423 5.97021C6.69115 5.67357 6.69115 5.19219 6.39423 4.89554Z"
                            fill="white" />
                        <path
                            d="M9.40412 0.213867C4.61257 0.213867 0.714355 4.11208 0.714355 8.90363C0.714355 13.6952 4.61257 17.5934 9.40412 17.5934C14.1957 17.5934 18.0939 13.6952 18.0939 8.90363C18.0939 4.11208 14.1956 0.213867 9.40412 0.213867ZM9.40412 16.0733C5.45066 16.0733 2.23445 12.8571 2.23445 8.90363C2.23445 4.95017 5.45066 1.73396 9.40412 1.73396C13.3573 1.73396 16.5738 4.95017 16.5738 8.90363C16.5738 12.8571 13.3576 16.0733 9.40412 16.0733Z"
                            fill="white" />
                        <path
                            d="M21.063 19.4878L15.5401 13.9649C15.2432 13.668 14.7623 13.668 14.4654 13.9649C14.1684 14.2616 14.1684 14.7429 14.4654 15.0396L19.9883 20.5625C20.0588 20.6332 20.1426 20.6893 20.2348 20.7275C20.327 20.7657 20.4259 20.7853 20.5257 20.7852C20.7203 20.7852 20.9146 20.711 21.063 20.5625C21.3599 20.2658 21.3599 19.7845 21.063 19.4878Z"
                            fill="white" />
                    </svg>
                </button>
            </div>
            <ul class="user_btn_container">
                <li class="user_btn">
                    <button>
                        <img src="img/user_icon.png" alt="user">
                        <p class="">Войти</p>
                    </button>
                </li>
                <li class="user_btn">
                    <button class="user_btn_icon_heart">
                        <img src="img/heart_icon.png" alt="heart">
                        <p class="">Избранное</p>
                    </button>
                </li>
                <li class="user_btn">
                    <button class="user_btn_icon_cart">
                        <img src="img/cart_icon.png" alt="cart">
                        <p class="">Корзина</p>
                    </button>
                </li>
            </ul>

            <!-- cart -->
            <div class="shopping-cart center" id="cart">

                <p class="cart_title">Корзина</p>
                <div class="cart_underline"></div>
                <div class="product">
                    <div class="product-image">
                        <img src="img/cart_img.png">
                    </div>
                    <div class="product-details">
                        <p class="product-description">Flugger Dekso 25 Краска полуматовая с очень высокой прочностью
                            для внутренних работ</p>
                        <ul class="product_details_list">
                            <li class="product_details_item">
                                <p>0.75 л</p>
                            </li>
                            <li class="product_details_item">
                                <p>Полуматовый</p>
                            </li>
                            <li class="product_details_item product_details_color_o">
                                <p>Flugger 900 FL 1358</p>
                            </li>
                        </ul>
                    </div>

                    <div class="product-price">3360 ₽

                    </div>

                    <div class="product-line-price-wrp">
                        <div class="product-line-price">3360 ₽
                        </div>
                        <div class="product_details_item">
                            <div class="product-quantity">
                                <input type="number" value="1" min="1">
                            </div>
                        </div>
                    </div>

                    <div class="product-removal">
                        <button class="remove-product">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18"
                                fill="none">
                                <path
                                    d="M15.4326 3.33054C14.1126 3.19665 12.7927 3.09623 11.4645 3.02092V3.01255L11.2841 1.92469C11.1612 1.15481 10.9808 0 9.06233 0H6.91431C5.00405 0 4.82368 1.1046 4.6925 1.91632L4.52033 2.98745C3.75787 3.03766 2.9954 3.08787 2.23294 3.16318L0.560433 3.33054C0.216094 3.36402 -0.0298628 3.67364 0.00293141 4.01674C0.0357256 4.35983 0.330873 4.61088 0.675213 4.57741L2.34772 4.41004C6.64376 3.9749 10.9726 4.14226 15.3178 4.58577C15.3424 4.58577 15.3588 4.58577 15.3834 4.58577C15.695 4.58577 15.9655 4.3431 15.9983 4.01674C16.0229 3.67364 15.7769 3.36402 15.4326 3.33054Z"
                                    fill="#9293B0" />
                                <path
                                    d="M13.9241 5.76581C13.7273 5.55661 13.4568 5.43945 13.178 5.43945H2.81505C2.53629 5.43945 2.25754 5.55661 2.06898 5.76581C1.88041 5.97502 1.77383 6.25954 1.79023 6.55242L2.29854 15.1382C2.38872 16.4102 2.5035 18.0001 5.36479 18.0001H10.6283C13.4896 18.0001 13.6043 16.4185 13.6945 15.1382L14.2028 6.56079C14.2192 6.25954 14.1126 5.97502 13.9241 5.76581ZM9.35749 13.8077H6.62737C6.29123 13.8077 6.01248 13.5231 6.01248 13.18C6.01248 12.8369 6.29123 12.5524 6.62737 12.5524H9.35749C9.69363 12.5524 9.97238 12.8369 9.97238 13.18C9.97238 13.5231 9.69363 13.8077 9.35749 13.8077ZM10.0462 10.4604H5.94689C5.61075 10.4604 5.332 10.1759 5.332 9.83276C5.332 9.48966 5.61075 9.20514 5.94689 9.20514H10.0462C10.3823 9.20514 10.6611 9.48966 10.6611 9.83276C10.6611 10.1759 10.3823 10.4604 10.0462 10.4604Z"
                                    fill="#9293B0" />
                            </svg>
                        </button>
                    </div>
                </div>

                <div class="product">
                    <div class="product-image">
                        <img src="img/cart_img.png">
                    </div>
                    <div class="product-details">
                        <p class="product-description">Flugger Dekso 25 Краска полуматовая с очень высокой прочностью
                            для внутренних работ</p>
                        <ul class="product_details_list">
                            <li class="product_details_item">
                                <p>2.8 л</p>
                            </li>
                            <li class="product_details_item">
                                <p>Полуматовый</p>
                            </li>
                            <li class="product_details_item product_details_color_f">
                                <p>Flugger 900 FL 1358</p>
                            </li>
                        </ul>
                    </div>

                    <div class="product-price">3360 ₽

                    </div>

                    <div class="product-line-price-wrp">
                        <div class="product-line-price">3360 ₽
                        </div>
                        <div class="product_details_item">
                            <div class="product-quantity">
                                <input type="number" value="1" min="1">
                            </div>
                        </div>
                    </div>

                    <div class="product-removal">
                        <button class="remove-product">
                            <svg xmlns="http://www.w3.org/2000/svg" width="16" height="18" viewBox="0 0 16 18"
                                fill="none">
                                <path
                                    d="M15.4326 3.33054C14.1126 3.19665 12.7927 3.09623 11.4645 3.02092V3.01255L11.2841 1.92469C11.1612 1.15481 10.9808 0 9.06233 0H6.91431C5.00405 0 4.82368 1.1046 4.6925 1.91632L4.52033 2.98745C3.75787 3.03766 2.9954 3.08787 2.23294 3.16318L0.560433 3.33054C0.216094 3.36402 -0.0298628 3.67364 0.00293141 4.01674C0.0357256 4.35983 0.330873 4.61088 0.675213 4.57741L2.34772 4.41004C6.64376 3.9749 10.9726 4.14226 15.3178 4.58577C15.3424 4.58577 15.3588 4.58577 15.3834 4.58577C15.695 4.58577 15.9655 4.3431 15.9983 4.01674C16.0229 3.67364 15.7769 3.36402 15.4326 3.33054Z"
                                    fill="#9293B0" />
                                <path
                                    d="M13.9241 5.76581C13.7273 5.55661 13.4568 5.43945 13.178 5.43945H2.81505C2.53629 5.43945 2.25754 5.55661 2.06898 5.76581C1.88041 5.97502 1.77383 6.25954 1.79023 6.55242L2.29854 15.1382C2.38872 16.4102 2.5035 18.0001 5.36479 18.0001H10.6283C13.4896 18.0001 13.6043 16.4185 13.6945 15.1382L14.2028 6.56079C14.2192 6.25954 14.1126 5.97502 13.9241 5.76581ZM9.35749 13.8077H6.62737C6.29123 13.8077 6.01248 13.5231 6.01248 13.18C6.01248 12.8369 6.29123 12.5524 6.62737 12.5524H9.35749C9.69363 12.5524 9.97238 12.8369 9.97238 13.18C9.97238 13.5231 9.69363 13.8077 9.35749 13.8077ZM10.0462 10.4604H5.94689C5.61075 10.4604 5.332 10.1759 5.332 9.83276C5.332 9.48966 5.61075 9.20514 5.94689 9.20514H10.0462C10.3823 9.20514 10.6611 9.48966 10.6611 9.83276C10.6611 10.1759 10.3823 10.4604 10.0462 10.4604Z"
                                    fill="#9293B0" />
                            </svg>
                        </button>
                    </div>
                </div>

                <div class="totals">
                    <div class="totals-item">
                        <label>Итого:</label>
                        <div class="totals-value" id="cart-subtotal">6720</div>
                    </div>
                    <div class="totals-item" style="display: none;">
                        <label>Tax (5%)</label>
                        <div class="totals-value" id="cart-tax">3.60</div>
                    </div>
                    <div class="totals-item" style="display: none;">
                        <label>Shipping</label>
                        <div class="totals-value" id="cart-shipping">15.00</div>
                    </div>
                    <div class="totals-item totals-item-total" style="display: none;">
                        <label>Grand Total</label>
                        <div class="totals-value" id="cart-total">90.57</div>
                    </div>
                </div>
                <ul class="cart_button_list">
                    <li class="cart_button_item">
                        <button class="all_category cart_button_style_fast">Купить в 1 клик
                            <img src="img/arrow-right.svg" alt="arrow-right">
                        </button>
                    </li>
                    <li class="cart_button_item">
                        <button class="all_category cart_button_style_move">Перейти в корзину
                            <svg class="" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none">
                                <path
                                    d="M3 4.79219C3 4.35318 3.35318 4 3.79219 4H5.29404C6.02022 4 6.66387 4.4225 6.96424 5.05625H20.5305C21.3986 5.05625 22.0323 5.88145 21.8046 6.71984L20.4512 11.7469C20.1707 12.7834 19.2299 13.5062 18.1572 13.5062H8.63443L8.81268 14.447C8.88529 14.82 9.21207 15.0906 9.59166 15.0906H19.1078C19.5468 15.0906 19.9 15.4438 19.9 15.8828C19.9 16.3218 19.5468 16.675 19.1078 16.675H9.59166C8.44959 16.675 7.46926 15.863 7.25801 14.744L5.55481 5.79893C5.5317 5.6735 5.42277 5.58437 5.29404 5.58437H3.79219C3.35318 5.58437 3 5.23119 3 4.79219ZM7.225 19.3156C7.225 19.1076 7.26598 18.9015 7.3456 18.7093C7.42523 18.5171 7.54193 18.3424 7.68905 18.1953C7.83618 18.0482 8.01084 17.9315 8.20306 17.8519C8.39529 17.7722 8.60131 17.7312 8.80938 17.7312C9.01744 17.7312 9.22346 17.7722 9.41569 17.8519C9.60792 17.9315 9.78258 18.0482 9.9297 18.1953C10.0768 18.3424 10.1935 18.5171 10.2731 18.7093C10.3528 18.9015 10.3938 19.1076 10.3938 19.3156C10.3938 19.5237 10.3528 19.7297 10.2731 19.9219C10.1935 20.1142 10.0768 20.2888 9.9297 20.4359C9.78258 20.5831 9.60792 20.6998 9.41569 20.7794C9.22346 20.859 9.01744 20.9 8.80938 20.9C8.60131 20.9 8.39529 20.859 8.20306 20.7794C8.01084 20.6998 7.83618 20.5831 7.68905 20.4359C7.54193 20.2888 7.42523 20.1142 7.3456 19.9219C7.26598 19.7297 7.225 19.5237 7.225 19.3156ZM18.3156 17.7312C18.7358 17.7312 19.1388 17.8982 19.436 18.1953C19.7331 18.4924 19.9 18.8954 19.9 19.3156C19.9 19.7358 19.7331 20.1388 19.436 20.4359C19.1388 20.7331 18.7358 20.9 18.3156 20.9C17.8954 20.9 17.4924 20.7331 17.1953 20.4359C16.8982 20.1388 16.7313 19.7358 16.7313 19.3156C16.7313 18.8954 16.8982 18.4924 17.1953 18.1953C17.4924 17.8982 17.8954 17.7312 18.3156 17.7312Z"
                                    fill="white" />
                            </svg>

                        </button>
                    </li>
                </ul>

                <!-- <div class="close-button" onclick="closeCart()">X</div> -->
            </div>
        </section>

        <section class="header_btn_nav center">
            <nav>
                <ul class="btn_nav_container">
                    <li class="btn_nav_item">
                        <a class="btn_nav_item_link" href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none">
                                <path
                                    d="M9.75603 1.23311C10.0868 0.919449 10.6 0.923745 10.9308 1.2374C12.1013 2.35024 13.1998 3.54901 14.2261 4.8466C14.6926 4.22788 15.2228 3.5533 15.7953 3.00333C16.1304 2.68538 16.6478 2.68538 16.9828 3.00763C18.4502 4.42553 19.6929 6.29887 20.5665 8.07769C21.4275 9.83073 22 11.6224 22 12.8857C22 18.3682 17.7674 23 12.5 23C7.17321 23 3 18.3639 3 12.8814C3 11.2314 3.75491 9.2163 4.92545 7.22265C6.10871 5.19893 7.77969 3.08926 9.75603 1.23311ZM12.5721 18.8752C13.6451 18.8752 14.5951 18.5744 15.49 17.9729C17.2754 16.7097 17.7547 14.1832 16.6817 12.1982C16.4908 11.8115 16.0031 11.7857 15.7275 12.1123L14.6587 13.3712C14.3788 13.6977 13.8741 13.6891 13.6112 13.3497C12.9114 12.4474 11.6603 10.8361 10.9478 9.92096C10.6806 9.57722 10.1717 9.57293 9.90022 9.91666C8.46674 11.7427 7.74576 12.8942 7.74576 14.1875C7.75 17.1308 9.89598 18.8752 12.5721 18.8752Z"
                                    fill="#FF4345" />
                            </svg>Акция
                        </a>
                    </li>
                    <li class="btn_nav_item">
                        <a class="btn_nav_item_link" href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none">
                                <path
                                    d="M19.5385 2H14.2637C14.044 2 13.8242 2.08791 13.6484 2.26374L5.12088 10.7912L2.65934 13.2527C1.78022 14.1319 1.78022 15.5385 2.65934 16.4176L7.58242 21.3407C8.02198 21.7802 8.59341 22 9.16483 22C9.73626 22 10.3077 21.7802 10.7473 21.3407L21.7363 10.3516C21.9121 10.1758 22 9.95604 22 9.73626V4.46154C22 3.0989 20.9011 2 19.5385 2ZM9.51648 20.1099C9.34066 20.2857 9.03297 20.2857 8.85714 20.1099L3.89011 15.1868C3.71429 15.011 3.71429 14.7033 3.89011 14.5275L5.73626 12.6813L11.3187 18.2637L9.51648 20.1099ZM18.3956 7.89011C17.7802 8.50549 16.7253 8.50549 16.1099 7.89011C15.4945 7.27472 15.4945 6.21978 16.1099 5.6044C16.7253 4.98901 17.7802 4.98901 18.3956 5.6044C19.011 6.21978 19.011 7.27472 18.3956 7.89011Z"
                                    fill="#FF9935" />
                            </svg>Бренды
                        </a>
                    </li>
                    <li class="btn_nav_item">
                        <a class="btn_nav_item_link" href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none">
                                <path
                                    d="M9.36716 19.7C9.39905 19.7284 9.43934 19.7456 9.48191 19.749C9.52448 19.7524 9.56699 19.7418 9.60299 19.7188C9.63898 19.6959 9.66649 19.6618 9.68132 19.6217C9.69615 19.5817 9.6975 19.5379 9.68516 19.497L7.16516 10.859C7.14231 10.7804 7.09595 10.7107 7.03231 10.6592C6.96867 10.6077 6.8908 10.5769 6.80916 10.571C6.40116 10.541 5.99416 10.508 5.58716 10.471L2.21716 10.164C2.18154 10.1605 2.14564 10.1668 2.11328 10.1821C2.08093 10.1974 2.05333 10.2212 2.03343 10.251C2.01353 10.2807 2.00206 10.3153 2.00025 10.3511C1.99844 10.3868 2.00636 10.4224 2.02316 10.454C3.84616 13.864 6.47116 17.114 9.36716 19.7ZM11.8392 21.526C11.8592 21.596 11.9192 21.648 11.9922 21.648C12.0274 21.647 12.0614 21.6345 12.089 21.6125C12.1166 21.5905 12.1363 21.5602 12.1452 21.526L15.2292 10.953C15.2383 10.9223 15.24 10.8899 15.234 10.8584C15.228 10.8269 15.2146 10.7973 15.1948 10.7721C15.175 10.747 15.1494 10.7269 15.1203 10.7136C15.0911 10.7004 15.0592 10.6943 15.0272 10.696C13.0048 10.7828 10.9796 10.7828 8.95716 10.696C8.92528 10.6944 8.89348 10.7004 8.86441 10.7136C8.83534 10.7268 8.80985 10.7468 8.79008 10.7719C8.77031 10.7969 8.75682 10.8263 8.75074 10.8577C8.74467 10.889 8.74618 10.9214 8.75516 10.952L11.8392 21.526ZM14.2992 19.497C14.2432 19.687 14.4692 19.832 14.6172 19.7C17.5132 17.113 20.1382 13.864 21.9612 10.454C21.9779 10.4225 21.9858 10.387 21.984 10.3514C21.9823 10.3157 21.9709 10.2812 21.9511 10.2515C21.9313 10.2218 21.9039 10.1979 21.8717 10.1825C21.8395 10.1671 21.8037 10.1607 21.7682 10.164L18.3982 10.471C17.9902 10.508 17.5832 10.541 17.1752 10.571C17.0935 10.5769 17.0157 10.6077 16.952 10.6592C16.8884 10.7107 16.842 10.7804 16.8192 10.859L14.2992 19.497ZM21.7932 8.656C21.828 8.65294 21.8615 8.64078 21.8902 8.62074C21.9189 8.60069 21.9418 8.57347 21.9567 8.54179C21.9716 8.5101 21.9779 8.47507 21.975 8.44018C21.9721 8.4053 21.9601 8.37179 21.9402 8.343L18.7022 3.648C18.5642 3.44805 18.3797 3.28461 18.1646 3.17174C17.9494 3.05886 17.7101 2.99993 17.4672 3H14.9772C14.9443 3 14.912 3.00809 14.883 3.02355C14.854 3.03901 14.8293 3.06136 14.811 3.08864C14.7927 3.11592 14.7815 3.14729 14.7782 3.17996C14.7749 3.21264 14.7797 3.24562 14.7922 3.276L17.0492 8.799C17.0812 8.87712 17.1372 8.9431 17.209 8.98746C17.2809 9.03183 17.365 9.05232 17.4492 9.046C17.7192 9.025 17.9912 9.002 18.2622 8.976L21.7932 8.656ZM13.1572 3.246C13.1267 3.17301 13.0753 3.11069 13.0095 3.0669C12.9436 3.02312 12.8662 2.99984 12.7872 3H11.1972C11.1181 2.99984 11.0407 3.02312 10.9749 3.0669C10.909 3.11069 10.8576 3.17301 10.8272 3.246L8.46916 8.904C8.45695 8.93361 8.45203 8.96571 8.45481 8.99762C8.4576 9.02952 8.468 9.0603 8.48515 9.08734C8.5023 9.11439 8.52569 9.13692 8.55337 9.15305C8.58104 9.16917 8.61218 9.17842 8.64416 9.18C10.8742 9.288 13.1102 9.288 15.3412 9.18C15.3731 9.17826 15.4041 9.16891 15.4316 9.15272C15.4592 9.13653 15.4824 9.11398 15.4995 9.08696C15.5165 9.05993 15.5268 9.02922 15.5296 8.99739C15.5323 8.96555 15.5274 8.93353 15.5152 8.904L13.1572 3.246ZM9.19216 3.276C9.20464 3.24562 9.20945 3.21264 9.20616 3.17996C9.20287 3.14729 9.19158 3.11592 9.1733 3.08864C9.15501 3.06136 9.13029 3.03901 9.10131 3.02355C9.07234 3.00809 9.04 3 9.00716 3H6.51716C6.27422 2.99993 6.0349 3.05886 5.81977 3.17174C5.60464 3.28461 5.42015 3.44805 5.28216 3.648L2.04416 8.343C2.02425 8.37179 2.01224 8.4053 2.00934 8.44018C2.00644 8.47507 2.01274 8.5101 2.02762 8.54179C2.0425 8.57347 2.06544 8.60069 2.09414 8.62074C2.12284 8.64078 2.15629 8.65294 2.19116 8.656L5.72216 8.976C5.99316 9.002 6.26416 9.025 6.53516 9.046C6.6194 9.05248 6.70352 9.03205 6.7754 8.98767C6.84729 8.94328 6.90323 8.87722 6.93516 8.799L9.19216 3.276Z"
                                    fill="#A536FF" />
                            </svg>
                            Premium бренды
                        </a>
                    </li>
                    <li class="btn_nav_item">
                        <a class="btn_nav_item_link" href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20"
                                fill="none">
                                <path opacity="0.8"
                                    d="M9.99977 13.0435C6.40368 13.0435 3.47803 10.1178 3.47803 6.52174C3.47803 2.92565 6.40368 0 9.99977 0C13.5959 0 16.5215 2.92565 16.5215 6.52174C16.5215 10.1178 13.5959 13.0435 9.99977 13.0435Z"
                                    fill="#A536FF" />
                                <path opacity="0.8"
                                    d="M6.52174 19.9995C2.92565 19.9995 0 17.0739 0 13.4778C0 9.88171 2.92565 6.95605 6.52174 6.95605C10.1178 6.95605 13.0435 9.88171 13.0435 13.4778C13.0435 17.0739 10.1178 19.9995 6.52174 19.9995Z"
                                    fill="#FF4345" />
                                <path opacity="0.8"
                                    d="M13.4783 19.9995C9.88219 19.9995 6.95654 17.0739 6.95654 13.4778C6.95654 9.88171 9.88219 6.95605 13.4783 6.95605C17.0744 6.95605 20 9.88171 20 13.4778C20 17.0739 17.0744 19.9995 13.4783 19.9995Z"
                                    fill="#FF9935" />
                            </svg>
                            Подбор по параметрам
                        </a>
                    </li>
                    <li class="btn_nav_item">
                        <a class="btn_nav_item_link" href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18"
                                fill="none">
                                <path
                                    d="M12.4698 0.710032L10.9098 4.45003C10.3112 4.19975 9.66874 4.07086 9.01984 4.07086C8.37095 4.07086 7.72852 4.19975 7.12984 4.45003L5.58984 0.670033C6.68204 0.220348 7.85274 -0.00769296 9.03386 -0.000825965C10.215 0.00604103 11.383 0.247678 12.4698 0.710032Z"
                                    fill="#F43434" />
                                <path
                                    d="M17.2898 12.4698L13.5498 10.9098C13.8001 10.3112 13.929 9.66874 13.929 9.01984C13.929 8.37095 13.8001 7.72852 13.5498 7.12984L17.3098 5.58984C17.7627 6.68071 17.9941 7.85073 17.9907 9.03185C17.9872 10.213 17.749 11.3816 17.2898 12.4698Z"
                                    fill="#DAE234" />
                                <path
                                    d="M17.3202 5.5902L13.5702 7.1302C13.3272 6.52791 12.9669 5.97994 12.5102 5.51814C12.0536 5.05633 11.5097 4.68992 10.9102 4.4402L12.4802 0.700195C13.5708 1.15378 14.5603 1.81968 15.3912 2.65918C16.2221 3.49867 16.8778 4.49499 17.3202 5.5902Z"
                                    fill="#E08B36" />
                                <path
                                    d="M12.4101 17.3202L10.8701 13.5702C11.4724 13.3272 12.0204 12.9669 12.4822 12.5102C12.944 12.0536 13.3104 11.5097 13.5601 10.9102L17.3101 12.4802C16.8554 13.5717 16.1879 14.5618 15.3467 15.3928C14.5054 16.2237 13.5072 16.8789 12.4101 17.3202Z"
                                    fill="#52EF7A" />
                                <path
                                    d="M5.53027 17.2898L7.09027 13.5498C7.68895 13.8001 8.33138 13.929 8.98027 13.929C9.62916 13.929 10.2716 13.8001 10.8703 13.5498L12.4103 17.3098C11.3194 17.7627 10.1494 17.9941 8.96827 17.9907C7.78714 17.9872 6.61849 17.749 5.53027 17.2898Z"
                                    fill="#54DBED" />
                                <path
                                    d="M0.679688 12.4101L4.42969 10.8701C4.67267 11.4724 5.03296 12.0204 5.48962 12.4822C5.94627 12.944 6.49016 13.3104 7.08969 13.5601L5.51969 17.3001C4.42909 16.8465 3.43955 16.1806 2.60865 15.3411C1.77774 14.5016 1.12204 13.5053 0.679688 12.4101Z"
                                    fill="#5286EF" />
                                <path
                                    d="M0.710032 5.53027L4.45003 7.09027C4.19975 7.68895 4.07086 8.33138 4.07086 8.98027C4.07086 9.62916 4.19975 10.2716 4.45003 10.8703L0.670033 12.4103C0.220348 11.3181 -0.00769296 10.1474 -0.000825965 8.96626C0.00604103 7.78513 0.247678 6.61716 0.710032 5.53027Z"
                                    fill="#5058F2" />
                                <path
                                    d="M5.5902 0.679688L7.1302 4.42969C6.52791 4.67267 5.97994 5.03296 5.51814 5.48962C5.05633 5.94627 4.68992 6.49016 4.4402 7.08969L0.700195 5.51969C1.15378 4.42909 1.81968 3.43955 2.65918 2.60865C3.49867 1.77774 4.49499 1.12204 5.5902 0.679688Z"
                                    fill="#EA5653" />
                            </svg>
                            Онлайн-колеровка
                        </a>
                    </li>
                    <li class="btn_nav_item">
                        <a class="btn_nav_item_link" href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none">
                                <path
                                    d="M11.5923 4.24454V14.1257H7.08136C5.99892 14.1257 4.96081 13.6957 4.1954 12.9303C3.43 12.1649 3 11.1268 3 10.0444V8.3259C3 7.24345 3.43 6.20534 4.1954 5.43994C4.96081 4.67454 5.99892 4.24454 7.08136 4.24454H11.5923ZM20.848 2.2829C20.6547 2.14383 20.4311 2.05269 20.1957 2.01699C19.9603 1.98128 19.7197 2.00204 19.4939 2.07755L12.4481 4.42412V13.9462L19.4939 16.2927C19.647 16.3443 19.8075 16.3704 19.969 16.3701C20.1665 16.3703 20.3621 16.3316 20.5446 16.2562C20.7272 16.1807 20.893 16.0701 21.0328 15.9305C21.1725 15.7909 21.2833 15.6252 21.359 15.4427C21.4346 15.2603 21.4735 15.0647 21.4735 14.8673V3.50302C21.4734 3.26463 21.4166 3.02969 21.3078 2.81756C21.1991 2.60543 21.0415 2.42218 20.848 2.2829ZM12.5805 19.9513C12.2651 20.3545 11.8428 20.6609 11.3617 20.8357C10.8807 21.0105 10.3602 21.0467 9.85958 20.9401C9.35896 20.8335 8.89834 20.5885 8.5302 20.2329C8.16206 19.8773 7.9012 19.4255 7.77734 18.9289L6.78922 14.9678C6.88591 14.9821 6.98367 14.9878 7.08136 14.985H12.4172L13.0702 17.6056C13.1723 18.0081 13.1812 18.4286 13.0963 18.8351C13.0114 19.2415 12.835 19.6233 12.5805 19.9513Z"
                                    fill="#FF9935" />
                            </svg>
                            Новости компании
                        </a>
                    </li>
                </ul>
            </nav>

            <p class="header_tel">8 (495) 120-81-55</p>
        </section>
    </header>
    <section class="swiper center">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <article class="swiper_slide_first">
                    <div class="">
                        <p class="first_slider_discount">
                            <span class="before_discount">до</span>25<span class="after_disount">%</span>
                        </p>
                        <p class="first_slide_discount_txt">Скидки на выделенные товары Benjamine Moore</p>
                    </div>
                    <div class="first_slide_wrp">
                        <img class="first_slide_img" src="img/slide_1.png" alt="Ceiling">
                    </div>
                    <button class="slider_vector_icon">

                    </button>
                </article>

                <article class="small_slide_2">
                    <div class="slider_img_wrp">
                        <img src="img/slide_2.png" alt="Regal">
                    </div>
                    <p class="small_slide_mian_txt">Benjamin Moore Regal Select 549 <wbr> Waterborne Interior Paint Eggshell
                    </p>
                    <p class="small_slide_value">0.95&nbsp;л &bull; 2&nbsp;л</p>
                    <p class="small_slide_price">3600 ₽
                        <span class="small_slide_old_price">4500 ₽</span>
                    </p>
                    <button class="slider_cart_icon">

                    </button>
                </article>

                <article class="small_slide_3">
                    <div class="slider_img_wrp">
                        <img src="img/slide_3.png" alt="Aura">
                    </div>
                    <p class="small_slide_mian_txt">Benjamin Moore Aura 532 Bath & <wbr> Spa Waterborne Interior Paint Matte Finish
                    </p>
                    <p class="small_slide_value">0.95&nbsp;л &bull; 2&nbsp;л</p>
                    <p class="small_slide_price">5200 ₽
                        <span class="small_slide_old_price">5720 ₽</span>
                    </p>
                    <button class="slider_cart_icon">

                    </button>
                </article>
            </div>

            <div class="swiper-slide">
                <article class="swiper_slide_first">
                    <div class="">
                        <p class="first_slider_discount">
                            <span class="before_discount">до</span>25<span class="after_disount">%</span>
                        </p>
                        <p class="first_slide_discount_txt">Скидки на выделенные товары Benjamine Moore</p>
                    </div>
                    <div class="first_slide_wrp">
                        <img class="first_slide_img" src="img/slide_1.png" alt="Ceiling">
                    </div>
                    <button class="slider_vector_icon">

                    </button>
                </article>

                <article class="small_slide_2">
                    <div class="slider_img_wrp">
                        <img src="img/slide_2.png" alt="Regal">
                    </div>
                    <p class="small_slide_mian_txt">Benjamin Moore Regal Select 549 <wbr> Waterborne Interior Paint Eggshell
                    </p>
                    <p class="small_slide_value">0.95&nbsp;л &bull; 2&nbsp;л</p>
                    <p class="small_slide_price">3600 ₽
                        <span class="small_slide_old_price">4500 ₽</span>
                    </p>
                    <button class="slider_cart_icon">

                    </button>
                </article>

                <article class="small_slide_3">
                    <div class="slider_img_wrp">
                        <img src="img/slide_3.png" alt="Aura">
                    </div>
                    <p class="small_slide_mian_txt">Benjamin Moore Aura 532 Bath & <wbr> Spa Waterborne Interior Paint Matte Finish
                    </p>
                    <p class="small_slide_value">0.95&nbsp;л &bull; 2&nbsp;л</p>
                    <p class="small_slide_price">5200 ₽
                        <span class="small_slide_old_price">5720 ₽</span>
                    </p>
                    <button class="slider_cart_icon">

                    </button>
                </article>
            </div>
        </div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </section>
    <section class="slogan center">
        <ul class="slogan_list">
            <li class="slogan_item">
                <img src="img/lifebuoy.png" alt="lifebuoy">
                <div class="slogan_item_ellipse">
                </div>
                <div class="slogan_item_ellipse_txt">
                    <p class="slogan_item_ellipse_title">Профессиональный подбор цвета</p>
                    <p class="slogan_item_ellipse_subtitle">Отвечаем на вопросы покупателей в течение 10 минут</p>
                </div>
            </li>
            <li class="slogan_item">
                <img src="img/paints.png" alt="paints">
                <div class="slogan_item_ellipse">
                </div>
                <div class="slogan_item_ellipse_txt">
                    <p class="slogan_item_ellipse_title">Широкий выбор красок</p>
                    <p class="slogan_item_ellipse_subtitle">Дарим подарки и скидки до 70% всем покупателям</p>
                </div>
            </li>
            <li class="slogan_item">
                <img src="img/clock.png" alt="clock">
                <div class="slogan_item_ellipse">
                </div>
                <div class="slogan_item_ellipse_txt">
                    <p class="slogan_item_ellipse_title">Гарантия качества продукции</p>
                    <p class="slogan_item_ellipse_subtitle">Соответствуем требованиям и стандартам качества</p>
                </div>
            </li>
        </ul>
    </section>
    <main class="category center">



        <section class="category center">
            <div class="category_title">
                <p class="category_title_txt">Популярные категории</p>
                <button class="all_category all_category_hidden">Все категории
                    <svg class="all_category_icon" xmlns="http://www.w3.org/2000/svg" width="24" height="25"
                        viewBox="0 0 24 25" fill="none">
                        <path d="M14.4302 6.42993L20.5002 12.4999L14.4302 18.5699"
                            stroke="url(#paint0_linear_2090_1140)" stroke-width="2" stroke-miterlimit="10"
                            stroke-linecap="round" stroke-linejoin="round" />
                        <path d="M3.5 12.5H20.33" stroke="url(#paint1_linear_2090_1140)" stroke-width="2"
                            stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                        <defs>
                            <linearGradient id="paint0_linear_2090_1140" x1="14.4302" y1="6.42993" x2="21.2006"
                                y2="6.77831" gradientUnits="userSpaceOnUse">
                                <stop stop-color="#DD3197" />
                                <stop offset="1" stop-color="#822FAF" />
                            </linearGradient>
                            <linearGradient id="paint1_linear_2090_1140" x1="3.5" y1="12.5" x2="8.20568" y2="20.6502"
                                gradientUnits="userSpaceOnUse">
                                <stop stop-color="#DD3197" />
                                <stop offset="1" stop-color="#822FAF" />
                            </linearGradient>
                        </defs>
                    </svg>
                </button>
            </div>

            <div class="swiper_container">
                <div class="swiper_wrapper">
                    <div class="swiper_slide">
                        <a class="swiper_link" href="#">
                            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"
                                fill="none">
                                <path
                                    d="M9.75603 1.23311C10.0868 0.919449 10.6 0.923745 10.9308 1.2374C12.1013 2.35024 13.1998 3.54901 14.2261 4.8466C14.6926 4.22788 15.2228 3.5533 15.7953 3.00333C16.1304 2.68538 16.6478 2.68538 16.9828 3.00763C18.4502 4.42553 19.6929 6.29887 20.5665 8.07769C21.4275 9.83073 22 11.6224 22 12.8857C22 18.3682 17.7674 23 12.5 23C7.17321 23 3 18.3639 3 12.8814C3 11.2314 3.75491 9.2163 4.92545 7.22265C6.10871 5.19893 7.77969 3.08926 9.75603 1.23311ZM12.5721 18.8752C13.6451 18.8752 14.5951 18.5744 15.49 17.9729C17.2754 16.7097 17.7547 14.1832 16.6817 12.1982C16.4908 11.8115 16.0031 11.7857 15.7275 12.1123L14.6587 13.3712C14.3788 13.6977 13.8741 13.6891 13.6112 13.3497C12.9114 12.4474 11.6603 10.8361 10.9478 9.92096C10.6806 9.57722 10.1717 9.57293 9.90022 9.91666C8.46674 11.7427 7.74576 12.8942 7.74576 14.1875C7.75 17.1308 9.89598 18.8752 12.5721 18.8752Z"
                                    fill="#FF4345" />
                            </svg>
                            Акции
                        </a>
                    </div>
                    <div class="swiper_slide">
                        <a class="swiper_link" href="#">Для внутренних работ</a>
                    </div>
                    <div class="swiper_slide">
                        <a class="swiper_link" href="#">Для наружных работ</a>
                    </div>
                    <div class="swiper_slide">
                        <a class="swiper_link" href="#">Универсальные</a>
                    </div>
                    <div class="swiper_slide">
                        <a class="swiper_link" href="#">Специального назначения</a>
                    </div>
                    <div class="swiper_slide">
                        <a class="swiper_link" href="#">Грунтовки</a>
                    </div>
                    <div class="swiper_slide">
                        <a class="swiper_link" href="#">Специального назначения</a>
                    </div>
                    <div class="swiper_slide">
                        <a class="swiper_link" href="#">Специального назначения</a>
                    </div>
                </div>
            </div>

            <div id="category_anchor" class="slider_container">
                <ul class="slider">
                    <li class="category_slide_item">
                        <img src="img/category_1.png" alt="Image 1">
                        <a href="#category_anchor" class="category_slide_item_link">Краски для стен
                            <span class="category_count">500+ товаров</span>
                        </a>
                    </li>
                    <li class="category_slide_item">
                        <img src="img/category_2.png" alt="Image 2">
                        <div class="category_slide_link_wrp">
                            <a href="#category_anchor" class="category_slide_item_link">Краски для потолка
                                <span class="category_count">500+ товаров</span>
                            </a>

                        </div>

                    </li>
                    <li class="category_slide_item">
                        <img src="img/category_3.png" alt="Image 3">
                        <a href="#category_anchor" class="category_slide_item_link">Краски для кухни и ванной
                            <span class="category_count">500+ товаров</span>
                        </a>
                    </li>
                    <li class="category_slide_item">
                        <img src="img/category_4.png" alt="Image 4">
                        <a href="#category_anchor" class="category_slide_item_link">Краски для пола
                            <span class="category_count">500+ товаров</span>
                        </a>
                    </li>

                    <!-- <li class="category_slide_item">
                        <img src="img/category_1.png" alt="Image 1">
                        <a href="#category_anchor" class="category_slide_item_link">Краски для стен
                            <span class="category_count">500+ товаров</span>
                        </a>
                    </li>
                    <li class="category_slide_item">
                        <img src="img/category_2.png" alt="Image 2">
                        <div class="category_slide_link_wrp">
                            <a href="#category_anchor" class="category_slide_item_link">Краски для потолка
                                <span class="category_count">500+ товаров</span>
                            </a>

                        </div>

                    </li>
                    <li class="category_slide_item">
                        <img src="img/category_3.png" alt="Image 3">
                        <a href="#category_anchor" class="category_slide_item_link">Краски для кухни и ванной
                            <span class="category_count">500+ товаров</span>
                        </a>
                    </li>
                    <li class="category_slide_item">
                        <img src="img/category_4.png" alt="Image 4">
                        <a href="#category_anchor" class="category_slide_item_link">Краски для пола
                            <span class="category_count">500+ товаров</span>
                        </a>
                    </li> -->
                </ul>
                <button class="prev_button"></button>
                <button class="next_button"></button>
            </div>
        </section>

        <div class="sale_title">
            <p class="sale_title_txt">Скидки</p>
            <button class="all_sales">Все скидки
                <svg class="all_sales_icon" xmlns="http://www.w3.org/2000/svg" width="24" height="25"
                    viewBox="0 0 24 25" fill="none">
                    <path d="M14.4302 6.42993L20.5002 12.4999L14.4302 18.5699" stroke="url(#paint0_linear_2090_1140)"
                        stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                    <path d="M3.5 12.5H20.33" stroke="url(#paint1_linear_2090_1140)" stroke-width="2"
                        stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                    <defs>
                        <linearGradient id="paint0_linear_2090_1140" x1="14.4302" y1="6.42993" x2="21.2006" y2="6.77831"
                            gradientUnits="userSpaceOnUse">
                            <stop stop-color="#DD3197" />
                            <stop offset="1" stop-color="#822FAF" />
                        </linearGradient>
                        <linearGradient id="paint1_linear_2090_1140" x1="3.5" y1="12.5" x2="8.20568" y2="20.6502"
                            gradientUnits="userSpaceOnUse">
                            <stop stop-color="#DD3197" />
                            <stop offset="1" stop-color="#822FAF" />
                        </linearGradient>
                    </defs>
                </svg>
            </button>
        </div>

        <section class="slider_container">
            <ul class="other_slider">
                <li class="category_slide_item">
                    <article class="small_slide_2">
                        <div class="slider_img_wrp">
                            <img src="img/slide_2.png" alt="Regal">
                        </div>
                        <p class="small_slide_mian_txt">Benjamin Moore Regal Select 549 <wbr> Waterborne Interior Paint Eggshell
                        </p>
                        <p class="small_slide_value">0.95&nbsp;л &bull; 2&nbsp;л</p>
                        <p class="small_slide_price">от 3600 ₽<span class="small_slide_old_price">4500 ₽</span></p>
                        <button class="slider_cart_icon">

                        </button>
                    </article>
                </li>
                <li class="category_slide_item">
                    <article class="small_slide_2">
                        <div class="slider_img_wrp">
                            <img src="img/slide_2.png" alt="Regal">
                        </div>
                        <p class="small_slide_mian_txt">Benjamin Moore Regal Select 549 <wbr> Waterborne Interior Paint Eggshell
                        </p>
                        <p class="small_slide_value">0.95&nbsp;л &bull; 2&nbsp;л</p>
                        <p class="small_slide_price">от 3600 ₽<span class="small_slide_old_price">4500 ₽</span></p>
                        <button class="slider_cart_icon">

                        </button>
                    </article>
                </li>
                <li class="category_slide_item">
                    <article class="small_slide_2">
                        <div class="slider_img_wrp">
                            <img src="img/slide_2.png" alt="Regal">
                        </div>
                        <p class="small_slide_mian_txt">Benjamin Moore Regal Select 549 <wbr> Waterborne Interior Paint Eggshell
                        </p>
                        <p class="small_slide_value">0.95&nbsp;л &bull; 2&nbsp;л</p>
                        <p class="small_slide_price">от 3600 ₽<span class="small_slide_old_price">4500 ₽</span></p>
                        <button class="slider_cart_icon">

                        </button>
                    </article>
                </li>
                <li class="category_slide_item">
                    <article class="small_slide_2">
                        <div class="slider_img_wrp">
                            <img src="img/slide_2.png" alt="Regal">
                        </div>
                        <p class="small_slide_mian_txt">Benjamin Moore Regal Select 549 <wbr> Waterborne Interior Paint Eggshell
                        </p>
                        <p class="small_slide_value">0.95&nbsp;л &bull; 2&nbsp;л</p>
                        <p class="small_slide_price">от 3600 ₽<span class="small_slide_old_price">4500 ₽</span></p>
                        <button class="slider_cart_icon">

                        </button>
                    </article>
                </li>
                <li class="category_slide_item">
                    <article class="small_slide_2">
                        <div class="slider_img_wrp">
                            <img src="img/slide_2.png" alt="Regal">
                        </div>
                        <p class="small_slide_mian_txt">Benjamin Moore Regal Select 549 <wbr> Waterborne Interior Paint Eggshell
                        </p>
                        <p class="small_slide_value">0.95&nbsp;л &bull; 2&nbsp;л</p>
                        <p class="small_slide_price">от 3600 ₽<span class="small_slide_old_price">4500 ₽</span></p>
                        <button class="slider_cart_icon">

                        </button>
                    </article>
                </li>
                <li class="category_slide_item">
                    <article class="small_slide_2">
                        <div class="slider_img_wrp">
                            <img src="img/slide_2.png" alt="Regal">
                        </div>
                        <p class="small_slide_mian_txt">Benjamin Moore Regal Select 549 <wbr> Waterborne Interior Paint Eggshell
                        </p>
                        <p class="small_slide_value">0.95&nbsp;л &bull; 2&nbsp;л</p>
                        <p class="small_slide_price">от 3600 ₽<span class="small_slide_old_price">4500 ₽</span></p>
                        <button class="slider_cart_icon">

                        </button>
                    </article>
                </li>
                <li class="category_slide_item">
                    <article class="small_slide_2">
                        <div class="slider_img_wrp">
                            <img src="img/slide_2.png" alt="Regal">
                        </div>
                        <p class="small_slide_mian_txt">Benjamin Moore Regal Select 549 <wbr> Waterborne Interior Paint Eggshell
                        </p>
                        <p class="small_slide_value">0.95&nbsp;л &bull; 2&nbsp;л</p>
                        <p class="small_slide_price">от 3600 ₽<span class="small_slide_old_price">4500 ₽</span></p>
                        <button class="slider_cart_icon">

                        </button>
                    </article>
                </li>
                <li class="category_slide_item">
                    <article class="small_slide_2">
                        <div class="slider_img_wrp">
                            <img src="img/slide_2.png" alt="Regal">
                        </div>
                        <p class="small_slide_mian_txt">Benjamin Moore Regal Select 549 <wbr> Waterborne Interior Paint Eggshell
                        </p>
                        <p class="small_slide_value">0.95&nbsp;л &bull; 2&nbsp;л</p>
                        <p class="small_slide_price">от 3600 ₽<span class="small_slide_old_price">4500 ₽</span></p>
                        <button class="slider_cart_icon">

                        </button>
                    </article>
                </li>
            </ul>
            <button class="other_prev_button"></button>
            <button class="other_next_button"></button>
        </section>


        <section class="form_container center">
            <div class="form_img_wrp">
                <img class="form_img" src="img/form_img.png" alt="img_form">
            </div>
            <div class="form">
                <p class="form_title">Нужна консультация?</p>
                <p class="form_subtitle">Оставьте свои данные, и мы перезвоним вам в ближайшее время</p>
                <form action="#" method="post" id="myForm">
                    <div class="form_group">
                        <div class="input_container form_input_name">
                            <input class="form_input " type="text" id="name" name="name" required
                                placeholder="Ваше имя">
                            <div class="error_message" id="nameError">Пожалуйста, введите корректное имя (только буквы).
                            </div>
                        </div>
                        <div class="input_container form_input_tel">
                            <input class="form_input" type="tel" id="phone" name="phone" required
                                placeholder="Номер телефона">
                            <div class="error_message" id="phoneError">Пожалуйста, введите корректный номер телефона (11
                                цифр).</div>
                        </div>
                        <div class="form_treaty_btn_wrp">
                            <p class="form_treaty">Нажимая на кнопку «Отправить», Вы принимаете условия <a
                                    href="#myForm">Соглашения</a></p>
                            <button class="form_button" type="button" onclick="validateForm()">Отправить
                                <svg class="form_button_icon" xmlns="http://www.w3.org/2000/svg" width="24" height="25"
                                    viewBox="0 0 24 25" fill="none">
                                    <path d="M14.4302 6.42993L20.5002 12.4999L14.4302 18.5699"
                                        stroke="url(#paint0_linear_2090_1140)" stroke-width="2" stroke-miterlimit="10"
                                        stroke-linecap="round" stroke-linejoin="round" />
                                    <path d="M3.5 12.5H20.33" stroke="url(#paint1_linear_2090_1140)" stroke-width="2"
                                        stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round" />
                                    <defs>
                                        <linearGradient id="paint0_linear_2090_1140" x1="14.4302" y1="6.42993"
                                            x2="21.2006" y2="6.77831" gradientUnits="userSpaceOnUse">
                                            <stop stop-color="#DD3197" />
                                            <stop offset="1" stop-color="#822FAF" />
                                        </linearGradient>
                                        <linearGradient id="paint1_linear_2090_1140" x1="3.5" y1="12.5" x2="8.20568"
                                            y2="20.6502" gradientUnits="userSpaceOnUse">
                                            <stop stop-color="#DD3197" />
                                            <stop offset="1" stop-color="#822FAF" />
                                        </linearGradient>
                                    </defs>
                                </svg>
                            </button>
                        </div>
                        <!-- Модальное окно -->
                        <div id="myModal" class="modal">
                            <div class="modal_content">
                                <img class="modal_svg_bcg" src="img/modal_bcg.svg" alt="bcg for modal">
                                <span class="close" onclick="closeModal()">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="40" height="40" viewBox="0 0 40 40"
                                        fill="none">
                                        <path d="M29.5247 29.5247L10.4771 10.4771M29.5247 10.4771L10.4771 29.5247"
                                            stroke="#9293B0" stroke-width="2" stroke-linecap="round"
                                            stroke-linejoin="round" />
                                    </svg>
                                </span>
                                <div class="modal_txt_wrp">
                                    <p class="modal_title">Заявка принята</p>
                                    <p class="modal_subtitle">Благодарим вас за заявку! Мы приняли её, и наш менеджер
                                        свяжется с вами в ближайшее время.</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
        </section>
    </main>
    <footer class="footer center" id="footer">
        <div class="footer_container">
            <div class="main_logo_wrp_hidden">
                <a href="#" class="main_logo">
                    <img src="img/main_logo.png" alt="main_logo">
                </a>
            </div>
            <ul class="footer_container_list">
                <li class="footer_column footer_column_logo">
                    <div class="main_logo_wrp footer_logo">
                        <a href="#" class="main_logo">
                            <img src="img/main_logo.png" alt="main_logo">
                        </a>
                    </div>
                    <div class="footer_grade_wrp">
                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
                            <path
                                d="M5.96463 21.924C5.43389 22.188 4.83164 21.7253 4.93889 21.1347L6.08013 14.8282L1.23602 10.3537C0.783649 9.93507 1.01877 9.16976 1.62515 9.0871L8.35988 8.15913L11.3629 2.38999C11.6337 1.87 12.3666 1.87 12.6375 2.38999L15.6405 8.15913L22.3752 9.0871C22.9816 9.16976 23.2167 9.93507 22.763 10.3537L17.9202 14.8282L19.0615 21.1347C19.1687 21.7253 18.5665 22.188 18.0357 21.924L11.9981 18.9161L5.96463 21.924Z"
                                fill="#E50E78" />
                        </svg>
                        <p class="footer_grade"></p>
                    </div>
                    <button class="footer_btn_to_director">Написать директору</button>
                </li>
                <li class="footer_column footer_column_tel_em_link">
                    <ul class="footer_column_tel_em_link_wrp">
                        <li class="footer_tel footer_column_title">
                            <p class="footer_tel_title" href="">Телефон</p>
                            <p class="footer_tel_subtitle">8 (495) 120-81-55</p>

                        </li>
                        <li class="footer_em footer_column_em">
                            <p class="footer_em_title">Электронная почта</p>
                            <a class="mail_address footer_em" href="mailto:info@kraskizdes.ru">info@kraskizdes.ru</a>
                        </li>
                        <li class="footer_link">
                            <a href="#footer" class="footer_link_item_vk"><img src="img/vk_icon.svg" alt="vk"></a>
                            <a href="#footer" class="footer_link_item_youtube"><img src="img/youtube_icon.svg"
                                    alt="youtube"></a>
                        </li>
                        <li class="footer_link footer_pay_system">
                            <div class=""><img src="img/pay_system.svg" alt="pay_system"></div>
                        </li>
                    </ul>
                </li>
                <li class="footer_column footer_column_about">
                    <p class="footer_column_title">
                        О комании
                    </p>
                    <ul class="footer_column_about_wrp">
                        <li class="footer_column_about_link_wrp">
                            <a href="#footer" class="footer_about_link">О нас</a>
                        </li>
                        <li class="footer_column_about_link_wrp">
                            <a href="#footer" class="footer_about_link">Бренды</a>
                        </li>
                        <li class="footer_column_about_link_wrp">
                            <a href="#footer" class="footer_about_link">Вакансии</a>
                        </li>
                        <li class="footer_column_about_link_wrp">
                            <a href="#footer" class="footer_about_link">Для бизнеса</a>
                        </li>
                        <li class="footer_column_about_link_wrp">
                            <a href="#footer" class="footer_about_link">Магазины</a>
                        </li>
                        <li class="footer_column_about_link_wrp">
                            <a href="#footer" class="footer_about_link">Оплата</a>
                        </li>
                        <li class="footer_column_about_link_wrp">
                            <a href="#footer" class="footer_about_link">Доставка</a>
                        </li>
                        <li class="footer_column_about_link_wrp">
                            <a href="#footer" class="footer_about_link">Акции</a>
                        </li>
                        <li class="footer_column_about_link_wrp">
                            <a href="#footer" class="footer_about_link">Помощь</a>
                        </li>
                    </ul>
                </li>
                <li class=" footer_column footer_column_catalog">
                    <p class="footer_column_title">
                        Каталог
                    </p>
                    <ul class="footer_column_catalog_wrp">
                        <li class="footer_column_catalog_link_wrp">
                            <a href="#footer" class="footer_calumn_catalog_link">Спецпредложение</a>
                        </li>
                        <li class="footer_column_catalog_link_wrp">
                            <a href="#footer" class="footer_calumn_catalog_link">Краски для внутренних работ</a>
                        </li>
                        <li class="footer_column_catalog_link_wrp">
                            <a href="#footer" class="footer_calumn_catalog_link">Краски для наружных работ</a>
                        </li>
                        <li class="footer_column_catalog_link_wrp">
                            <a href="#footer" class="footer_calumn_catalog_link">Краски универсальные</a>
                        </li>
                        <li class="footer_column_catalog_link_wrp">
                            <a href="#footer" class="footer_calumn_catalog_link">Краски специального назначения</a>
                        </li>
                        <li class="footer_column_catalog_link_wrp">
                            <a href="#footer" class="footer_calumn_catalog_link">Антисептики, пропитки, лазури для
                                дерева и
                                камня</a>
                        </li>
                        <li class="footer_column_catalog_link_wrp">
                            <a href="#footer" class="footer_calumn_catalog_link">Лаки, масла, воски</a>
                        </li>
                        <li class="footer_column_catalog_link_wrp">
                            <a href="#footer" class="footer_calumn_catalog_link">Грунтовки</a>
                        </li>
                        <li class="footer_column_catalog_link_wrp">
                            <a href="#footer" class="footer_calumn_catalog_link">Декоративные штукатурки, фактурные
                                краски</a>
                        </li>
                        <li class="footer_column_catalog_link_wrp">
                            <a href="#footer" class="footer_calumn_catalog_link">Декоративные дизайнерские краски</a>
                        </li>
                        <li class="footer_column_catalog_link_wrp">
                            <a href="#footer" class="footer_calumn_catalog_link">Монтажные пены и очистители</a>
                        </li>
                        <li class="footer_column_catalog_link_wrp">
                            <a href="#footer" class="footer_calumn_catalog_link">Клея, герметики, гидроизоляция</a>
                        </li>
                        <li class="footer_column_catalog_link_wrp">
                            <a href="#footer" class="footer_calumn_catalog_link">Затирки, сухие смеси</a>
                        </li>
                        <li class="footer_column_catalog_link_wrp">
                            <a href="#footer" class="footer_calumn_catalog_link">Растворители и очистители,
                                спецсредства</a>
                        </li>
                        <li class="footer_column_catalog_link_wrp">
                            <a href="#footer" class="footer_calumn_catalog_link">Малярные инструменты, краскопульты</a>
                        </li>
                        <li class="footer_column_catalog_link_wrp">
                            <a href="#footer" class="footer_calumn_catalog_link">Морилки по дереву</a>
                        </li>
                        <li class="footer_column_catalog_link_wrp">
                            <a href="#footer" class="footer_calumn_catalog_link">Стеклообои, малярный флизелин, обои под
                                покраску</a>
                        </li>
                        <li class="footer_column_catalog_link_wrp">
                            <a href="#footer" class="footer_calumn_catalog_link">Каталоги цветов, колеровочные карты</a>
                        </li>
                    </ul>
                </li>
            </ul>
            <div class="footer_line">
            </div>
            <p class="footer_underline_txt">© 2023 Интернет-магазин лакокрасочной продукции</p>
        </div>

    </footer>

    <script src="script.js"></script>

</body>

</html>